<template>
  <div>
      <hr>
      <p>{{ 'propsJson: ' + propsJson }}</p>
      <p>{{ 'width1:' + props.width1 }}</p>
      <p>{{ 'width2:' + props.width2 }}</p>
      <p>{{ 'width2:' + width2 }}</p>
      <p>{{ 'width3Json:' + width3Json }}</p>
      <p>{{ 'width2LocalJson:' + width2LocalJson }}</p>
      <p>{{ 'width2Local2Json:' + width2Local2Json }}</p>
      <p>{{ 'widthArr1:' + props.widthArr1 }}</p>
      <p>{{ 'width2Local3:' + width2Local3 }}</p>
  </div>
</template>

<script setup>
import { watch } from 'vue'

console.log(props.width2)
console.log(isRef(props.width2))

const props = defineProps({
  width1: {
      type: String,
      default: ''
  },
  width2: {
      type: String,
      default: ''
  },
  width3: {
      type: Object,
      default: () => {}
  },
  widthArr1: {
      type: Array,
      default: () => []
  }
})

const propsJson = JSON.stringify(props)
const width3Json = JSON.stringify(props.width3)

// 解构
// const props2 = { props }

// #region 1.监听基本类型字符串 '300'
watch(
  props.width1,
  (newValue, oldValue) => {
      debugger
      newValue
      oldValue
  },
  { deep: true }
)

watch(
  () => props.width1,
  (newValue, oldValue) => {
      debugger
      newValue
      oldValue
  },
  { deep: true }
)
// #endregion

// #region 2.监听const width = ref('400')
watch(
  props.width2,
  (newValue, oldValue) => {
      debugger
      newValue
      oldValue
  },
  { deep: true }
)

watch(
  () => props.width2,
  (newValue, oldValue) => {
      debugger
      newValue
      oldValue
  },
  { deep: true }
)
// #endregion

// #region 3.监听reactive
watch(
  props.width3,
  (newValue, oldValue) => {
      debugger
      newValue
      oldValue
  },
  { deep: true }
)

watch(
  () => props.width3,
  (newValue, oldValue) => {
      debugger
      newValue
      oldValue
  },
  { deep: true }
)
// #endregion

// #region 4.监听props
watch(
  props,
  (newValue, oldValue) => {
      debugger
      newValue
      oldValue
  },
  { deep: true }
)

watch(
  () => props,
  (newValue, oldValue) => {
      debugger
      newValue
      oldValue
  },
  { deep: true }
)
// #endregion

// #region 5.toRefs
const width2Local = ref('')

// width2Local2.value = props.width2
// Getting a value from the `props` in root scope of `<script setup>` will cause the value to lose reactivity.
// 从“＜script setup＞”的根作用域中的“props”获取值将导致该值失去反应性。
// 所以上面的props.xxx(字符串类型)都不是响应式的了？对，下面的警告也说明了问题
// props.数组, 下面尝试一下

// toRefs() expects a reactive object but received a plain one.
// toRefs() 需要一个反应对象，但收到了一个普通对象。
width2Local.value = toRefs(props.width2)
watch(
  () => width2Local,
  (newValue, oldValue) => {
      debugger
      newValue
      oldValue
  },
  { deep: true }
)

watch(
  width2Local,
  (newValue, oldValue) => {
      debugger
      newValue
      oldValue
  },
  { deep: true }
)
const width2LocalJson = JSON.stringify(width2Local)
// #endregion

// #region 6.toRef
const width2Local2 = ref('')

width2Local2.value = toRef(props.width2)
watch(
  () => width2Local2,
  (newValue, oldValue) => {
      debugger
      newValue
      oldValue
  },
  { deep: true }
)

watch(
  width2Local2,
  (newValue, oldValue) => {
      debugger
      newValue
      oldValue
  },
  { deep: true }
)
const width2Local2Json = JSON.stringify(width2Local2)
// #endregion

// #region 7.数组类型
watch(
  props.widthArr1,
  (newValue, oldValue) => {
      debugger
      newValue
      oldValue
  },
  { deep: true }
)

watch(
  () => props.widthArr1,
  (newValue, oldValue) => {
      debugger
      newValue
      oldValue
  },
  { deep: true }
)
// #endregion

// #region 8.接受props,并且用ref定义
const width2Local3 = ref(props.width2)

watch(
  width2Local3,
  (newValue, oldValue) => {
      debugger
      newValue
      oldValue
  },
  { deep: true }
)

watch(
  () => width2Local3,
  (newValue, oldValue) => {
      debugger
      newValue
      oldValue
  },
  { deep: true }
)

// 这样是能监听变化的
// width2Local3.value = 500

// #endregion

// 结论：
// 常用的，我要监听父组件传来的值（比如width2）。最好是用ref定义，不要用常量。
// 并且还要在刚传进来就监听的话，那就必须要加immediate=true了。
// 如果不加的话，第一次进来是不会被监听到的。什么时候才会被监听到，当它变化时，
// 比如在父组件定义了一个输入框，v-model和这个变量width2关联，当输入框变化时，子组件的监听就会监听到。
// 以前popoutselector就是这种做法。
</script>
